<template>
  <div>

    <template v-for="item in this.menuData">
      <el-submenu :class='[item.MenudMenuId==""?"parent-menu":"parent-menub"]' v-if="item.menudModels != null"
        :key="item.MenudId" :index="item.MenudId.toString()">
        <template slot="title">
          <!-- <i v-bind:class="item.Icon"></i> -->
          <span>{{ item.MenudName }}</span>
        </template>
        <!-- 组件递归 -->
        <MenuTree :menuData="item.menudModels"></MenuTree>
      </el-submenu>
      <el-menu-item v-else :key="item.MenudId" :index="item.MenudWebName"
        :class='[item.MenudMenuId==""?"parent-menu":"parent-menub"]'>
        <!-- <i :class="item.Icon"></i> -->
        <span slot="title">{{ item.MenudName }}</span>
      </el-menu-item>
    </template>

  </div>
</template>

<script>
export default {
  name: "MenuTree",
  data () {
    return {};
  },
  props: ["menuData"], //子组件接父组件的数据
  components: {},
};
</script>

<style>
.parent-menu {
  width: 130px;
  float: left;
}
.parent-menub {
  width: 200px;
}
.el-menu.el-menu--horizontal {
  border-bottom: none;
}
.el-submenu__icon-arrow.el-icon-arrow-down {
  margin-left: 200px;
}
</style>